<template>
  <div>
    <el-row >
      <el-col :span="1"></el-col>
      <el-col :span="22">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">今日复印人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{todayManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="todayManyOrLess < 0 ">较昨日减少{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="todayManyOrLess > 0 ">较昨日增加{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与昨日持平 &nbsp;&nbsp;</span>
                <el-icon v-if="todayManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="todayManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a style="text-decoration: underline">查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">本周复印人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{toweekManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="toweekManyOrLess < 0 ">较上周减少{{toweekCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="toweekManyOrLess > 0 ">较上周增加{{toweekCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上周持平 &nbsp;&nbsp;</span>
                <el-icon v-if="toweekManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="toweekManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">本月复印人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{tomoonManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="tomoonManyOrLess < 0 ">较上月减少{{tomoonCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="tomoonManyOrLess > 0 ">较上月增加{{tomoonCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上月持平 &nbsp;&nbsp;</span>
                <el-icon v-if="tomoonManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="tomoonManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">复印总人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{totalManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="toyearManyOrLess < 0 ">较上一年减少{{toyearCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="toyearManyOrLess > 0 ">较上一年增加{{toyearCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上一年持平 &nbsp;&nbsp;</span>
                <el-icon v-if="toyearManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="toyearManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>

        </el-row>

      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>
  <div style="margin-top: 20px">
    <el-row >
      <el-col :span="1"></el-col>
      <el-col :span="22">
        <el-card>
          <el-row style="display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
            <!-- 左侧内容：复印人数趋势 -->
            <div>
              <span>复印人数趋势</span>
            </div>

            <!-- 右侧内容：日期选择器 -->
            <div>
              <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="——"
                  start-placeholder="开始日期"
                  end-placeholder="截止日期"
              />
            </div>
          </el-row>
          <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;">
          <div class="chart-container" ref="chartContainerFirst">
            <!-- 图表将渲染在这里 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>
  <div style="margin-top: 20px ;overflow: hidden">
    <el-row :gutter="50">
      <el-col :span="1"></el-col>
      <el-col :span="13" >
        <el-card>
          <el-row style="display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
            <!-- 左侧内容：复印内容分布 -->
            <div>
              <span>复印内容分布</span>
            </div>
            <!-- 右侧内容：日期选择器 -->
            <div>
              <el-date-picker
                  v-model="value2"
                  type="daterange"
                  range-separator="——"
                  start-placeholder="开始日期"
                  end-placeholder="截止日期"
              />
            </div>
          </el-row>
          <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;">
          <div class="chart-containerSecond" ref="chartContainerSecond">
            <!-- 图表将渲染在这里 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card>
          <div style="float: left"><span>复印用途比例</span></div>
          <br>
          <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;margin-top: 33px">
          <div class="chart-containerThird" ref="chartContainerThird">
            <!-- 图表将渲染在这里 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>


</template>

<script setup>
import {computed, onBeforeUnmount} from 'vue';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from "axios";
import {ElMessage} from "element-plus";

const chartContainerFirst = ref(null);
const chartContainerSecond=ref(null);
const chartContainerThird=ref(null);
const lastDayManNumber=ref();
const lastWeekManNumber=ref();
const lastMoonManNumber=ref();
const lastYearManNumber=ref();
const toyearManNumber=ref();


let myChartFirst = null;
let myChartSecond= null;
let myChartThird= null;

var optionThird={
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '复印用途',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 255, name: '医保报销' },
        { value: 735, name: '生育险报销' },
        { value: 580, name: '保险理赔' },
        { value: 484, name: '转院参考' },
        { value: 300, name: '教学科研' }
      ]
    }
  ]
}


var optionSecond={
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['病案首页', '护理记录', '化验单', '出院记录', '手术同意书', '入院记录', '医嘱单','麻醉同意书'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '复印次数',
      type: 'bar',
      barWidth: '20%',
      data: [10, 52, 200, 334, 390, 330, 100,355]
    }
  ]
}

var optionFirst = {
  xAxis: {
    type: 'category',
    //下面的data对应的是日期  这个值来自于日期选择器1
    data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7','1-8', '1-9', '1-10', '1-11', '1-12', '1-13', '1-14','1-15', '1-16', '1-17', '1-18', '1-19', '1-20', '1-21'],
    axisLabel: {
      formatter: function (value) {
        // 此处value已经是'几-几'的格式，所以直接返回即可
        return value;
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {//下面的data是对应每天的数值

      data: [820, 932, 901, 934, 1290, 1330, 1320,223,424,353,656,2131,435,675,234,213,223,253,732,1032,434,555],
      type: 'line',
      smooth: true
    }
  ]
};


onMounted(() => {
  //第一个表
  if (chartContainerFirst.value) {
    myChartFirst = echarts.init(chartContainerFirst.value);
    myChartFirst.setOption(optionFirst);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartFirst.resize();
    });
  }
  //第二个表
  if (chartContainerSecond.value) {
    myChartSecond = echarts.init(chartContainerSecond.value);
    myChartSecond.setOption(optionSecond);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartSecond.resize();
    });
  }
  //第三个表
  if (chartContainerThird.value) {
    myChartThird = echarts.init(chartContainerThird.value);
    myChartThird.setOption(optionThird);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartThird.resize(optionThird);
    });
  }
  getDatePersonNumber();

});

onBeforeUnmount(() => {
  // 清理资源
  if (myChartFirst) {
    myChartFirst.dispose();
    window.removeEventListener('resize', myChartFirst.resize);
  }
  if (myChartSecond) {
    myChartSecond.dispose();
    window.removeEventListener('resize', myChartSecond.resize);
  }
  if (myChartThird) {
    myChartThird.dispose();
    window.removeEventListener('resize', myChartThird.resize);
  }
});

//这是日期选择器1
const value1 = ref('')
//这是日期选择器2
const value2 = ref('')
// 这个是后端查询今天的所有复印的人人数
const todayManNumber=ref(30)

//查询后端返回回来的值的多少  就是条件查询今天的和昨天复印的人数的多少
const todayManyOrLess= computed(()=>{
  return todayManNumber.value- lastDayManNumber.value;
})
// 这里面的是绝对值化了的人数差
const todayCompare=ref(Math.abs(todayManyOrLess.value)
)

// 这个是后端查询这周的所有复印的人人数
const toweekManNumber=ref(200)

//查询后端返回回来的值的多少  就是条件查询这周的和上周复印的人数的多少
const toweekManyOrLess=computed(()=>{
  return toweekManNumber.value-lastWeekManNumber.value;

})
// 这里面的是绝对值化了的人数差
const toweekCompare=ref(Math.abs(toweekManyOrLess.value)
)


// 这个是后端查询这月的所有复印的人人数
const tomoonManNumber=ref(800)

//查询后端返回回来的值的多少  就是条件查询这月的和上月复印的人数的多少
const tomoonManyOrLess=computed(()=>
{
  return tomoonManNumber.value-lastMoonManNumber.value;
})
// 这里面的是绝对值化了的人数差
const tomoonCompare=ref(Math.abs(tomoonManyOrLess.value)
)
// 这个是后端查询的所有复印的人人数
const totalManNumber=ref(2966)

//查询后端返回回来的值的多少  就是条件查询这月的和上月复印的人数的多少
const toyearManyOrLess=computed(()=>{
  return toyearManNumber.value-lastYearManNumber.value;
})
// 这里面的是绝对值化了的人数差
const toyearCompare=ref(Math.abs(toyearManyOrLess.value)
)



//后端查询复印登记表 record_copy 的 登记时间来确定是复印时间  来确定每天的复印人数  因为 这个业务不合理
const getDatePersonNumber=()=>{
  axios.get(getBaseURL(3)+'/v1/recordCopyStatistics/selectByDate')
      .then(response=>{
        if(response.data.code==2000)
        {
          todayManNumber.value=response.data.data[0];
          toweekManNumber.value=response.data.data[1];
          tomoonManNumber.value=response.data.data[2];
          totalManNumber.value=response.data.data[3];
          lastDayManNumber.value=response.data.data[4];
          lastWeekManNumber.value=response.data.data[5];
          lastMoonManNumber.value=response.data.data[6];
          lastYearManNumber.value=response.data.data[7];
          toyearManNumber.value=response.data.data[8];
        }
        else{
          ElMessage.error("数据异常，请联系开发人员！")
        }
      })

}


</script>

<style scoped>
.chart-container {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
.chart-containerSecond {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
.chart-containerThird {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
</style>
